<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>付款页面</title>
	<!--字体图标-->
	<link href="../../lib/javaex/pc/css/icomoon.css" rel="stylesheet" />
	<!--动画-->
	<link href="../../lib/javaex/pc/css/animate.css" rel="stylesheet" />
	<!--骨架样式-->
	<link href="../../lib/javaex/pc/css/common.css" rel="stylesheet" />
	<!--皮肤-->
	<link href="../../lib/javaex/pc/css/skin/default.css" rel="stylesheet" />
	<!--jquery，不可修改版本-->
	<script src="../../lib/javaex/pc/lib/jquery-1.7.2.min.js"></script>
	<!--核心组件-->
	<script src="../../lib/javaex/pc/js/javaex.min.js"></script>
	<!--表单验证-->
	<script src="../../lib/javaex/pc/js/javaex-formVerify.js"></script>
	<script src="../../js/config.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/userAuth.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		body {
			background-color: #E7EAED;
		}

		.container {
			width: 90%;
			background-color: #fff;
			margin: 100px auto 100px auto;
			box-shadow: 0 20px 30px 0 rgb(0 0 0 / 15%);
			min-height: 800px;
		}

		.address {
			padding: 30px;
		}

		.box {
			border-bottom: none;
			padding-left: 20px;
		}

		.selected {
			border: 2px solid #1B9AEE;
		}

		.goods {
			padding: 30px;
		}

		.goods-img {
			width: 200px;
			height: 200px;
			/* background: url(../../img/gua.jpg);
			background-size: contain; */
			float: left;
		}

		.descript {
			float: left;
			margin: 0 0 0 40px;
		}

		.goods-title {
			font-size: 18px;
			font-weight: 600;
			width: 300px;
		}

		.goods-detail {
			margin-top: 20px;
			color: darkgrey;
			width: 300px;
		}

		.business-name {
			font-size: 20px;
			font-weight: 700;
			color: #8C63A6;
		}

		.count {
			float: right;
			font-size: 16px;
		}

		.price {
			margin-top: 140px;
			font-size: 18px;
			color: #1B9AEE;
		}
	</style>
</head>

<body>
	<header>
		<div class="javaex-navbar">
			<div class="javaex-container-fluid clear">
				<!--logo名称-->
				<a href="../index.html">
					<div class="javaex-logo" style="color: #fff;">九美阁商城</div>
				</a>
				<!--左侧导航-->
				<ul class="javaex-nav fl">
					<li class="active"><a href="javascript:;">付款</a></li>
				</ul>

				<!--右侧-->
				<ul class="javaex-nav fr">
					<li>
						<a href="./userInfo.html">收货地址</a>
					</li>

					<li>
						<a href="./shopCar.html">购物车</a>
						<!-- <ul class="javaex-nav-dropdown-menu" style="right: 10px;">
							<li><a href="javascript:;">退出当前账号</a></li>
						</ul> -->
					</li>

					<li>
						<a href="./ordersInfo.html">我的订单</a>
					</li>

					<li>
						<a id="loginMsg" href="javascript:;">欢迎您，尊贵的九美阁会员</a>
						<ul id="loginOption" class="javaex-nav-dropdown-menu" style="right: 10px;">
							<li><a href="../login.html">登录</a></li>
							<li><a href="../register.html">注册</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
		<script>
			function loadLoginMsg() {
				var user = sessionStorage.getItem("user");
				if (user != null) {
					$("#loginMsg").text("欢迎你, " + JSON.parse(user).username);
					$("#loginOption").html(`
						<li><a href="./userInfo.html">个人信息</a></li>
						<li><a href="javascript:logout();">退出登录</a></li>
					`);
				}
			}

			function logout() {
				sessionStorage.clear();
				localStorage.clear();
				window.location = '../login.html';
			}
		</script>
	</header>
	<div class="container">
		<div id="address" class="address">
			<fieldset class="javaex-fieldset">
				<legend>选择地址</legend>
				<div id="addressTable" class="javaex-fieldset-box">

				</div>
			</fieldset>
		</div>
		<div id="goods" class="goods">
			<fieldset class="javaex-fieldset" style="height: 250px;">
				<legend>商品信息</legend>
				<div class="javaex-fieldset-box">
					<div class="goods-info">
						<div class="goods-img">
							<img id="goodsImg" width="200px" height="200px" src="../../img/gua.jpg">
						</div>
						<div class="descript">
							<div id="goodsTitle" class="goods-title">
								基尘是帅哥
							</div>
							<div id="goodsDetail" class="goods-detail">
								基尘基尘是帅哥是怎么回事呢？基尘相信大家都很熟悉，但是基尘基尘是帅哥是怎么回事呢，下面就让小编带大家一起了解吧。
								基尘基尘是帅哥，其实就是基尘是大帅哥，大家可能会很惊讶基尘怎么会基尘是帅哥呢？但事实就是这样，小编也感到非常惊讶。
								这就是关于基尘基尘是帅哥的事情了，大家有什么想法呢，欢迎在评论区告诉小编一起讨论哦！
							</div>
							<div class="count">
								<span id="goodsNum">1</span>
								X
								<span id="goodsPrice">100</span>
								￥
							</div>
						</div>
					</div>
					<div style="float: right;">
						<div class="business-name">
							<span id="shopName" style="font-weight: 700;" class="icon-home">
								基尘的大店
							</span>
						</div>
						<div class="price">
							总价：
							<span id="totalPrice">
								1234
							</span>
							￥
						</div>
					</div>
				</div>
			</fieldset>
			<button style="float: right; margin-right: 20px; font-size: 16px; width: 80px; height: 40px;"
				class="javaex-btn yellow" onclick="buy()">买！</button>
		</div>
	</div>
	<div class="javaex-page-footer" style="margin-top: 50px;">

	</div>
</body>
<script>
	var addressList;
	var token;
	var selectedIndex;
	var ordersId;
	var goods;
	var orders;
	var business;
	var user;

	window.onload = function () {
		loadLoginMsg();
		token = localStorage.getItem("token_user");
		ordersId = sessionStorage.getItem("ordersId");
		user = sessionStorage.getItem("user");
		if(token == null) {
			window.location = "../login.html"
		}
		if (token != null && user == null) {
			getSession() == 500 ? window.location = "../login.html" : '';
		}
		getAddress();
		getGoodsInfo();

	}


	function getAddress() {
		javaex.loading({
			mode: "manual",
			containerId: "address",
			type: "open"
		});
		$.ajax({
			url: "http://" + getAddressHost() + "/address/show",
			headers: {
				"token": token
			},

			dataType: "json",
			type: "post",
			timeout: 10000,
			async: true,
			success: function (res) {
				javaex.loading({
					mode: "manual",
					containerId: "address",
					type: "close"
				});
				if (res.code == "200") {
					addressList = JSON.parse(res.address);
					initAddress();

				} else {
					javaex.tip({
						content: "操作失败",
						type: "error"
					});
				}
			}
		});


	}

	function initAddress() {
		var table = $("#addressTable");
		for (var i = 0; i < addressList.length; ++i) {
			if (addressList[i].status == 1) {
				selectedIndex = i;
			}
			var html = `
					<div class="javaex-breadcrumb box ` + (addressList[i].status == 1 ? "selected" : "") + `" onclick="changeSelectAddress(this ,` + i + `)">
						<span>` + addressList[i].name + `</span>
						<span class="divider">/</span>
						<span>` + (addressList[i].code == null ? '000000' : addressList[i].code) + `</span>
						<span class="divider">/</span>
						<span>` + addressList[i].phone + `</span>
						<span class="divider">/</span>
						<span>` + addressList[i].province + ` ` + addressList[i].city + ` ` + addressList[i].district + `</span>
						<span class="divider">/</span>
						<span>` + addressList[i].address + `</span>
					</div>
			`
			table.append(html);
		}
	}

	function changeSelectAddress(obj, index) {
		$(".javaex-breadcrumb").removeClass("selected");
		$(obj).addClass("selected");
		selectedIndex = index;
	}

	function getGoodsInfo() {
		javaex.loading({
			mode: "manual",
			containerId: "goods",
			type: "open"
		});
		$.ajax({
			url: "http://" + getOrdersHost() + "/orders/showOne",
			headers: {
				"token": token
			},
			data: {
				"ordersId": ordersId
			},
			dataType: "json",
			type: "post",
			timeout: 10000,
			async: true,
			success: function (res) {
				javaex.loading({
					mode: "manual",
					containerId: "goods",
					type: "close"
				});
				console.log(res);
				if (res.code == "200") {
					goods = JSON.parse(res.goods);
					business = JSON.parse(res.business);
					orders = JSON.parse(res.orders);
					initInfo(goods, orders, business);
				} else {
					javaex.tip({
						content: "订单不存在",
						type: "error"
					});
				}
			}
		});
	}

	function initInfo(goods, orders, business) {
		$("#goodsTitle").text(goods.name);
		if (goods.info.length > 50) {
			goods.info = goods.info.substr(0, 50) + "...";
		}
		$("#goodsDetail").text(goods.info);
		$("#goodsNum").text(orders.num);
		$("#goodsPrice").text(goods.price);
		$("#shopName").text(business.shopName);
		$("#totalPrice").text(Number(orders.num) * Number(goods.price))
		$("#goodsImg").attr('src', goods.img);
	}


	function buy() {
		javaex.tip({
			content: "数据发送中，请稍后...",
			type: "submit"
		});
		$.ajax({
			url: "http://" + getGoodsHost() + "/goods/buy",
			headers: {
				"token": token
			},
			data: {
				"num": orders.num,
				"goodsId": goods.goodsId,
			},
			dataType: "json",
			type: "post",
			success: function (res) {
				console.log(res);
				if (res.code == "200") {
					$.ajax({
						url: "http://" + getOrdersHost() + "/orders/addAddress",
						headers: {
							"token": token
						},
						data: {
							"ordersId": ordersId,
							"addressId": addressList[selectedIndex].addressId
						},
						dataType: "json",
						type: "post",
						success: function (res) {
							console.log(res);
							if (res.code == "200") {
								console.log('Success');
								window.location = "./ordersInfo.html"

							} else {
								javaex.tip({
									content: "操作失败",
									type: "error"
								});
							}
						}
					});
				} else if (res.code == "300") {
					javaex.tip({
						content: "库存不足",
						type: "error"
					});
				} else {
					javaex.tip({
						content: "操作失败",
						type: "error"
					});
				}
			}
		});
	}


</script>



</html>